<template>
  <div class="container_main">

    <!-- <el-button type="primary" style="width: 120px;margin-bottom: 15px;margin-left: 30px" icon="el-icon-arrow-left">返回上一级</el-button> -->
    <div  @click="$router.push('/')"  style="color: rgb(39,175,211); font-weight: 600;display: flex;align-items: center;cursor: pointer;margin-bottom: 10px;margin-left: 10px">
      <img src="./goback.png" alt="" style="height: 20px;width: 20px;">
      <div>返回</div>
    </div>

    <el-dialog title="地调核验详情曲线" style="margin-top: 200px;" :visible.sync="centerDialogVisible" width="30%" center>

      <div ref="dialogRef" style="width: 100%; height: 400px; z-index: 9999;">

      </div>

    </el-dialog>

    <!-- 对话框 -->

    <div class="container_top">
      <div class="title">省调需求</div>
      <div class="part1">
        <div class="text cup" :class="item.eventDetail === xqxxParams.eventDetail ? 'text-sel' : ''"
          style="color: #414346" v-for="(item, i) in sdxqList" :key="i" @click="getXqxx(item)">
          <span class="num n1">{{ i + 1 }}</span><span>{{ item.eventDetail }}</span>
        </div>
      </div>
      <div class="title">需求信息概览</div>
      <div class="part2">
        <el-table @row-click="clickmesssageEvt" max-height="150px"
          :cell-style="{ border: '1px solid #0C8F96', height: '35px' }" :header-row-style="{ height: '45px' }"
          :header-cell-style="{
            'border-radius': 0,
            border: '1px solid #0C8F96',
            'background-color': 'rgba(117,215,225,0.2)',
            'text-align': 'center',
            'font-size': '16px',
            color: '#17274A',
            'font-weight': 'bold',
          }" :data="tableData" style="width: 99.5%" ref="table">
          <el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
          <el-table-column prop="need_desc" header-align="center" align="center" label="需求描述"></el-table-column>
          <el-table-column prop="res_name" header-align="center" align="center" label="资源类型">
          </el-table-column>
          <el-table-column prop="need_val" header-align="center" align="center" label="需求量(MW)/k值">
            <template slot-scope="scope">
              <div style="color: #af9d24">{{ scope.row.need_val }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="need_duration" header-align="center" align="center" label="需求时段"></el-table-column>
          <el-table-column prop="check_state" header-align="center" align="center" label="校核状态">
            <template slot-scope="scope">
              <div v-if="scope.row.check_state === '成功'" class="status1">
                成功
              </div>
              <div v-else class="status0">失败</div>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="title">
        地调校核详情
        <div class="tab-2 floatright">
          <div v-for="(item, index) in tab2List" :key="index" @click="selTab2Option(item)">
            <span class="tab2-btn" :class="{ tab2Selected: item.isActive }">{{
              item.text
            }}</span>
          </div>
        </div>
      </div>
      <div v-show="currentTab2ID != '2'" class="part3">
        <div class="table-1">
          <el-table class="myTableless" max-height="200px" :cell-style="{ border: '1px solid #0C8F96', height: '35px' }"
            :header-row-style="{ height: '45px' }" :header-cell-style="{
              'border-radius': 0,
              border: '1px solid #0C8F96',
              'background-color': 'rgba(117,215,225,0.2)',
              'text-align': 'center',
              'font-size': '16px',
              color: '#17274A',
              'font-weight': 'bold',
            }" :data="tableList1" style="width: 99.5%" ref="table">
            <el-table-column prop="province_need" header-align="center" align="center" label="省调需求"></el-table-column>
            <el-table-column prop="need_val" header-align="center" align="center" label="需求量">
              <template slot-scope="scope">
                <div style="color: #af9d24">{{ scope.row.need_val }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="need_duration" header-align="center" align="center" label="需求时段"></el-table-column>
            <el-table-column prop="passnum" header-align="center" align="center" label="地调校核通过量">
              <template slot-scope="scope">
                <div style="color: #af9d24">{{ Number(scope.row.pass_val).toFixed(2) }}</div>
              </template>
            </el-table-column>

            <!-- 这边进行页面上的修改改成一对多的关系 -->
            <el-table-column prop="group" style="padding: 0;" header-align="center" align="center" label="通过机组">
              <template slot-scope="scope">
                <el-table :data="scope.row.units" style="width: 100%" :show-header="false" :cell-style="({ row, column, rowIndex, columnIndex }) => {
                  if (rowIndex === scope.row.units.length - 1) {
                    return {
                      'border-bottom': 'none'
                    }
                  } else {
                    return {
                      'border-radius': 0,
                      'border-bottom': '2px solid #0C8F96',
                      'text-align': 'center',
                      color: '#17274A'
                    }
                  }
                }">
                  <el-table-column align="center" prop="resource_name" label="resource_name"></el-table-column>
                </el-table>
              </template>
            </el-table-column>

            <el-table-column prop="group" header-align="center" align="center" label="实际调整出力">
              <template slot-scope="scope">
                <el-table class="myLessTable" :data="scope.row.units" style="width: 100%" :show-header="false"
                  :cell-style="({ row, column, rowIndex, columnIndex }) => {
                    if (rowIndex === scope.row.units.length - 1) {
                      return {
                        'border-bottom': 'none'
                      }
                    } else {
                      return {
                        'border-radius': 0,
                        'border-bottom': '2px solid #0C8F96',
                        'text-align': 'center',
                        color: '#17274A'
                      }
                    }
                  }">
                  <el-table-column align="center" prop="check_val" label="check_val"></el-table-column>
                </el-table>
              </template>
            </el-table-column>

            <el-table-column v-if="myTableText == '荷' || myTableText == '储能'" prop="group" header-align="center"
              align="center" label="调节曲线">
              <template slot-scope="scope">
                <el-table class="myLessTable" :data="scope.row.units" style="width: 100%" :show-header="false"
                  :cell-style="({ row, column, rowIndex, columnIndex }) => {
                    if (rowIndex === scope.row.units.length - 1) {
                      return {
                        'border-bottom': 'none'
                      }
                    } else {
                      return {
                        'border-radius': 0,
                        'border-bottom': '2px solid #0C8F96',
                        'text-align': 'center',
                        color: '#17274A'
                      }
                    }
                  }">
                  <el-table-column prop="group" header-align="center" align="center" label="调节曲线">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="chankanEchartsEvt(scope.row)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>


          </el-table>
        </div>
        <div class="desc">
          校核状态：
          <div v-if="!this.unPassParams.checkState" class="status0">未校核</div> <span
            v-if="!this.unPassParams.checkState">原因如下</span>
          <div v-if="this.unPassParams.checkState" class="status1">通过</div> <span
            v-if="this.unPassParams.checkState">无风险</span>

        </div>
        <div v-if="!this.unPassParams.checkState" class="table-2">
          <el-table max-height="120px" :cell-style="{ border: '1px solid #0C8F96', height: '35px' }"
            :header-row-style="{ height: '45px' }" :header-cell-style="{
              'border-radius': 0,
              border: '1px solid #0C8F96',
              'background-color': 'rgba(117,215,225,0.2)',
              'text-align': 'center',
              'font-size': '16px',
              color: '#17274A',
              'font-weight': 'bold',
            }" :data="tableList2" style="width: 99.5%" ref="table">
            <el-table-column prop="result_desc" header-align="center" align="center" label="结果描述"></el-table-column>
            <el-table-column prop="dev_name" header-align="center" align="center" label="设备名称"></el-table-column>
            <el-table-column prop="bef_val" header-align="center" align="center" label="调整前潮流值(MW)">
              <template slot-scope="scope">
                <div style="color: #af9d24">{{ Number(scope.row.bef_val).toFixed(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="val" header-align="center" align="center" label="调整后潮流值(MW)">
              <template slot-scope="scope">
                <div style="color: #ed4646">{{ Number(scope.row.val).toFixed(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="limit_val" header-align="center" align="center" label="限值">
              <template slot-scope="scope">
                <div style="color: #ed4646">{{ Number(scope.row.limit_val).toFixed(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="ovr_rate" header-align="center" align="center" label="越限率">
              <template slot-scope="scope">
                <div style="color: #ed4646">{{ (scope.row.ovr_rate) }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="currentTab2ID == '2'" class="part3">
        <div class="info">
          <div class="label">非统调新能源</div>
         <div  style="color:#00706b ;cursor: pointer;font-size: 14px;" class="val"> 更多 >> </div>
        </div>
        <div class="chart" id="chart1" ref="chart1"></div>
      </div>

    </div>
    <div class="container_bottom">
      <div class="title">省地交互流程</div>
      <div class="content">
        <div class="col">
          <img class="icon" src="@/assets/images/shengdiao-flow1.png" />
          <div class="desc">收到省调下发需求</div>
          <img class="status" src="@/assets/images/shengdiao-status1.png" />
        </div>
        <div class="col--">
          <img class="arrow" src="@/assets/images/shengdiao-arrow.png" />
        </div>
        <div class="col">
          <img class="icon" src="@/assets/images/flow2.png" />
          <div class="desc">校核通过</div>
          <img v-if="this.unPassParams.checkState" class="status" src="@/assets/images/shengdiao-status1.png" />
          <img v-else class="status" src="@/assets/images/shengdiao-status0.png" />
        </div>
        <div class="col--">
          <img class="arrow" src="@/assets/images/shengdiao-arrow.png" />
        </div>
        <div class="col">
          <img class="icon" src="@/assets/images/shengdiao-flow3.png" />
          <div class="desc">地调上送</div>
          <!-- <img class="status" src="@/assets/images/shengdiao-status0.png" /> -->
          <img class="status" src="@/assets/images/shengdiao-status1.png" />
        </div>
        <img class="dashed" src="@/assets/images/shengdiao-dashed.png" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getSdList,
  getNeedList,
  getDdcheckList,
  getCheckResult,
  infoNeedView,
  provinceNeed,
  checkDetail,
  newEnergyCurve,
  checkNotPassInfo,
  checkDetailCurve,

} from "@/api/index";
import cos from "highlight.js/lib/languages/cos";
export default {
  name: "shengdiao",
  components: {},
  data() {
    return {
      centerDialogVisible: false,

      myTableText: '源',

      unPassParams: {
        checkId: '',
        checkState: '',
      },

      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: "调整前",

            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          },
          {
            name: "调整后",

            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      },
      nameParams: {
        resourceName: "",
      },


      checkDetailParams: {
        eventDetail: '',
        type: '1'
      },

      //省调需求列表
      sdxqList: [],
      //需求信息概览请求体
      xqxxParams: {
        eventDetail: "",
      },

      tab1List: [
        { text: "地区风险分析", id: 0, isActive: false },
        { text: "省调需求响应", id: 1, isActive: true },
      ],
      tableData: [

      ],
      tab2List: [
        { text: "源", id: 0, isActive: true },
        { text: "荷", id: 1, isActive: false },
        { text: "储能", id: 3, isActive: false },
        { text: "新能源", id: 2, isActive: false },
      ],
      currentTab2ID: 1, // 默认源
      chart1: undefined,
      chart1Option: {
        color: ["#2bb193", "#af9d24"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新能源预测",
            type: "line",
            data: [],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "k值*容量",
            type: "line",
            data: [],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
      tableList1: [

      ],
      tableList2: [

      ],
    };
  },
  created() {
    this.useMyinfoNeedView()
    this.useMyprovinceNeed()


  },
  mounted() {

  },
  methods: {
    goBack(){
      this.$router.push('/')
    },

    arrAysortfunction() {


    },

    chankanEchartsEvt(it) {
      console.log(it, 'ititii');


      this.centerDialogVisible = true
      this.nameParams.resourceName = it.resource_name
      this.nameParams.eventId = it.eventId
      this.useMycheckDetailCurve()
    },

    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.dialogRef
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.option)
      })
    },


    clickmesssageEvt(it) {
      let myState = it.check_state
      console.log(it, '9999999');
      if (myState == '成功') {
        this.currentTab2ID
        myState = true
        this.unPassParams.checkState = myState
        // this.$message.success('暂无风险')
      } else {
        myState = false
        this.unPassParams.checkId = it.check_id
        this.unPassParams.checkState = myState
        this.useMycheckNotPassInfo()
      }
    },

    useMycheckNotPassInfo() {
      checkNotPassInfo(this.unPassParams).then(res => {
        if (res.code !== 200) return

        this.tableList2 = res.data.filter((value, index, self) =>
          index === self.findIndex((t) => (
            t.dev_name === value.dev_name
          ))
        );

        console.log(this.tableList2, '看一下data')

        // let myData = res.data
        // for (let k in myData) {
        //   if (myData[k] == null) myData[k] = '未知'
        // }
        // this.tableList2 = [myData]
      })
    },


    // 新能源曲线绘制
    useMynewEnergyCurve() {
      newEnergyCurve(this.xqxxParams).then(res => {
        if (res.code !== 200) return
        let xData = []
        let beforeData = []
        res.data.before.forEach(it => {
          xData.push(it.x)
          beforeData.push(Number(it.y).toFixed(2))
        })
        let afterData = []
        res.data.after.forEach(it => {
          afterData.push(Number(it.y).toFixed(2))
        })
        this.chart1Option.xAxis.data = xData
        this.chart1Option.series[0].data = beforeData
        this.chart1Option.series[1].data = afterData
        this.$nextTick(() => {
          this.chart1 = echarts.init(this.$refs.chart1);
          this.chart1Option && this.chart1.setOption(this.chart1Option);
        })

      })
    },


    useMycheckDetail() {
      checkDetail(this.checkDetailParams).then(res => {
        if (res.code !== 200) return

        res.data.forEach(it => {
          it.units.forEach(et => {
            et.check_val = Number(et.check_val).toFixed(2)
            et.eventId = it.event_id
          })
        })

        this.tableList1 = res.data
        console.log(this.tableList1, '看数据tableList1')

        console.log(this.tableList1, '表格该走')
      })
    },

    // 地调校核详情曲线
    useMycheckDetailCurve() {
      checkDetailCurve(this.nameParams).then(res => {
        if (res.code !== 200) return
        let xData = []
        let beforeData = []   // 前
        let afterData = []   // 后
        res.data.beforeAdjust = res.data.beforeAdjust.slice(1)
        res.data.afterAdjust = res.data.afterAdjust.slice(1)
        res.data.beforeAdjust.forEach(it => {
          xData.push(it.x)
          beforeData.push(it.y)
        })
        res.data.afterAdjust.forEach(it => {
          afterData.push(it.y)
        })
        this.option.xAxis.data = xData
        this.option.series[0].data = beforeData
        this.option.series[1].data = afterData
        this.initChart()
      })

    },


    useMyprovinceNeed() {
      provinceNeed().then(res => {
        if (res.code !== 200) return

        if (res.data.length === 0) return


        //更新默认数据
        this.xqxxParams.eventDetail = res.data[0]
        this.useMyinfoNeedView()
        this.checkDetailParams.eventDetail = res.data[0]
        this.useMycheckDetail() // 核验详情
        res.data.forEach(it => {
          this.sdxqList.push({ "eventDetail": it })
        })
        // this.sdxqList = res.data
        // this.useMynewEnergyCurve()
        // this.useMynewEnergyCurve()
      })
    },

    useMyinfoNeedView() {
      infoNeedView(this.xqxxParams).then(res => {
        if (res.code !== 200) return
        let myState = res.data[0].check_state
        console.log(res.data[0], '9999999');
        if (myState == '成功') {
          myState = true
        } else {
          myState = false
        }
        this.unPassParams.checkId = res.data[0].check_id
        this.unPassParams.checkState = myState
        this.useMycheckNotPassInfo()
        this.tableData = res.data
      })
    },


    getXqxx(it) {
      console.log(it, '99');
      this.xqxxParams.eventDetail = it.eventDetail
      this.useMyinfoNeedView()
      this.checkDetailParams.eventDetail = it.eventDetail
      this.useMycheckDetail() // 核验详情
    },





    selTab1Option(data) {
      if (!data.isActive) {
        this.tab1List.forEach(function (obj) {
          obj.isActive = false;
        });
        data.isActive = true;
      }
    },
    selTab2Option(data) {
      if (!data.isActive) {
        this.tab2List.forEach(function (obj) {
          obj.isActive = false;
        });
        data.isActive = true;
        //存储一下当前ID，便于切换
        this.currentTab2ID = data.id;

        this.myTableText = data.text
        //  if( this.currentTab2ID != 2 ){
        //     }

        // console.log(this.currentTab2ID  , '看一下id')
        if (data.text == '新能源') {
          this.useMynewEnergyCurve()
        } else if (data.text == '源') {
          this.checkDetailParams.type = "1"
          this.useMycheckDetail() // 核验详情
        } else if (data.text == '荷') {
          this.checkDetailParams.type = "2"
          this.useMycheckDetail() // 核验详情
        } else {
          this.checkDetailParams.type = "4"
          this.useMycheckDetail() // 核验详情

        }
      }
    },

    back() {
      this.$emit("business-city-reload", "cityindex");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .myTableless {

  .cell {
    padding-left: 0;
    padding-right: 0;
  }

}

::v-deep .myLessTable {

  tbody tr:last-child td {
    border-bottom: none;
  }
}

* {
  box-sizing: border-box;
}

.container_main {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  box-sizing: border-box;

  .back {
    position: absolute;
    width: 30px;
    height: auto;
    left: 20px;
    top: 20px;
  }

  .container_top {
    width: 100%;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid #2eadd3;

    .part1 {
      width: 100%;
      height: 80px;
      overflow: auto;
      padding: 5px 10px;
      margin: 10px auto;
      display: flex;
      flex-direction: column;
      background-color: #f6f6f6;
      border: 1px solid #8cdcf5;

      .text {
        display: flex;
        align-items: center;
        height: 40px;

        .num {
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 10px;
          margin-right: 5px;

          &.n1 {
            border: 1px solid #2eadd3;
            background-color: rgba(117, 215, 225, 0.2);
          }

          &.n2 {
            border: 1px solid #a5740b;
            background-color: rgba(165, 116, 11, 0.2);
          }
        }
      }
    }

    .part2 {
      width: 100%;
      height: 150px;
      margin: 10px auto;

      .status1 {
        color: #0c8f96;

        background: url(../../assets/images/pass.png) center center no-repeat;
      }

      .status0 {
        color: #c00b1f;
        background: url(../../assets/images/nopass.png) center center no-repeat;
      }

      .status00 {
        background: url(../../assets/images/pass.png) center center no-repeat;

      }
    }

    .part3 {
      width: 100%;
      margin: 10px auto;
      display: flex;
      flex-direction: column;

      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .label {
          width: 150px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          background: url(../../assets/images/tab2-sel.png) center no-repeat;
          background-size: 100% 100%;
        }

        .val {
          margin-right: 10px;
          font-size: 16px;

          span {
            font-weight: 600;
            color: #0c8f96;
          }
        }
      }

      .chart {
        width: 100%;
        height: 150px;
      }

      .table-1 {
        width: 100%;
        // height: 115px;
      }

      .desc {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        font-size: 16px;
        color: #17274a;
        display: flex;
        align-items: center;

        .status0 {
          width: 58px;
          height: 25px;
          line-height: 25px;
          margin-right: 10px;
          font-size: 16px;
          color: #c00b1f;
          text-align: center;
          background: url(../../assets/images/nopass.png) center center no-repeat;
          background-size: 100% 100%;
        }


        .status1 {
          width: 58px;
          height: 25px;
          line-height: 25px;
          margin-right: 10px;
          font-size: 16px;
          color: #0c8f96;
          text-align: center;
          background: url(../../assets/images/pass.png) center center no-repeat;
          background-size: 100% 100%;
        }
      }

      .table-2 {
        width: 100%;
        // height: 85px;
      }
    }
  }

  .container_bottom {
    width: 100%;
    height: 250px;
    margin-top: 20px;
    background: url(../../assets/images/shengdiao.png) center no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    .title {
      background: none;
      line-height: 44px;
    }

    .content {
      width: 100%;
      height: calc(100% - 40px);
      padding-top: 10px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .icon {
          width: 89px;
          height: 95px;
        }

        .desc {
          height: 28px;
          line-height: 28px;
          font-size: 16px;
          font-weight: 500;
        }

        .status {
          width: 40px;
          height: 40px;
          z-index: 2;
        }
      }

      .col-- {
        height: 100%;
        margin-left: 40px;
        margin-right: 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .arrow {
          margin-top: 50px;
          width: 65px;
          height: auto;
        }
      }

      .dashed {
        width: 480px;
        height: auto;
        position: absolute;
        bottom: 42px;
        z-index: 1;
        left: calc(50% - 230px);
      }
    }
  }

  .title {
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding-left: 47px;
    padding-right: 20px;
    box-sizing: border-box;
    color: #00706b;
    font-size: 18px;
    font-weight: bold;
    background: url(../../assets/images/views/home/titleBg.png) left center no-repeat;
  }
}

.tab-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 15px;
}

.tab1-btn {
  display: block;
  width: 180px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  /* border-radius: 12px; */
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #00706b;
  background: url(../../assets/images/tab-unsel.png) center no-repeat;
  background-size: 100% 100%;
}

.tab1Selected {
  background: url(../../assets/images/tab-sel.png) center no-repeat;
  background-size: 100% 100%;
  color: #2d3b4d;
}

.tab-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto 15px;

  &.floatright {
    float: right;
  }
}

.tab2-btn {
  display: block;
  width: 150px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  /* border-radius: 12px; */
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #00706b;
  background: url(../../assets/images/tab2-unsel.png) center no-repeat;
  background-size: 100% 100%;
}

.tab2Selected {
  background: url(../../assets/images/tab2-sel.png) center no-repeat;
  background-size: 100% 100%;
  color: #2d3b4d;
}

.text-sel {
  color: #a5740b !important;
}
</style>
